<template>
	<view class="page">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="top_img">
				<image :src='STATIC_URL+"139.png"'></image>
			</view>
			<view class="car_content">
				<view class="car_content_bg">
					<view class="tips">
						<view class="tips_text">
							宝马i3/奥迪Q4（豪华座驾、新能源汽车、智能座舱、电动四驱、大空间 SUV、全景天窗、科技座驾）
						</view>
						<image class="tips_img" :src='STATIC_URL+"140.png"'></image>
					</view>
					<view class="tips">
						<view class="tips_text">
							低首付、年租月付、长期租赁、低成本用车、低门槛购车、灵活租期、租满即送、轻资产模式
						</view>
						<image class="tips_img" :src='STATIC_URL+"141.png"'></image>
					</view>
					<view class="tips">
						<view class="tips_text">
							<view class="">支持芝麻信用免押金，无视征信！</view>
							<view class="">当日办理，当日提车！！聚划算！提新车！租满送！！！</view>
						</view>
						<image class="tips_img" :src='STATIC_URL+"142.png"'></image>
					</view>
					<view class="field">
						<view class="field_phone flex align-center">
							<view class="field_phone_label">手机号</view>
							<input class="field_phone_input" v-model="phone_no" type="number" :maxlength="11"
								placeholder="请输入手机号" placeholder-style="font-size:32rpx;color:#999;" />
						</view>
						<view class="field_phone flex align-center justify-between">
							<view class="field_phone_label">意向车型</view>
							<!-- <input class="field_phone_input" style="pointer-events: none;" v-model="carLable" :disabled="true"
								type="text" placeholder="请选择车型" placeholder-style="font-size:32rpx;color:#999;" />
							<image class="field_phone_icon" :src='STATIC_URL+"240.png"' mode=""></image> -->
							
							<view class="selct_info flex align-center">
								<view class="select_item" v-for="(v, k) in carList" :key="k" @tap.stop="selectCar(v.value)">
									<image v-if="carId == v.value" class='select_item_img' :src='STATIC_URL+"7.png"'>
									</image>
									<image v-else class='select_item_img' :src='STATIC_URL+"8.png"'>
									</image>
									<text class="select_item_text">{{v.name}}</text>
								</view>
							</view>
						</view>
						<view class="button flex align-center justify-center" @tap.stop="submit">
							预约用车
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- #ifdef MP-WEIXIN -->
			<view style="position: fixed;bottom: 0;left: 0;z-index: 999;width: 100%;">
				<weixin-customer :source="2" @close="customerClose"></weixin-customer>
			</view>
			<view v-if="customerStatus" style="height: 80rpx;"></view>
			<!-- #endif -->
		</template>

		<benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="carShow" :label.sync='carLable'
			:value.sync='carId' :options='carList' mode='selector' :mask-show='true' :timeout='true' :picker-height='88'
			default-type='value' :default-props='{"label":"name","value":"value"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myInfo_picker4_0'>
					<text class='myInfo_picker4_0_c0' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
					<text class='myInfo_picker4_0_c1'>选择车型</text>
					<text class='myInfo_picker4_0_c2'
						@tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确定</text>
				</view>
			</template>
		</benben-picker>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import weixinCustomer from "@/components/customer/index.vue"
	export default {
		data() {
			return {
				phone_no: "",
				car: "",
				carShow: false,
				isShow: true,
				"carList": [{
					"name": "宝马i3",
					"value": "1",
					"image": ""
				}, {
					"name": "奥迪Q4",
					"value": "2",
					"image": ""
				}],
				"carId": "1",
				"carLable": "宝马i3",
				
				customerStatus: false,
			}
		},
		components: {
			weixinCustomer
		},
		onLoad() {
			setTimeout(() => {
				this.isShow = false;
			}, 200)
		},
		onShow() {
			if (global.token) {
				this.phone_no = global.userInfo.phone_no;
			}
			// #ifdef MP-WEIXIN
			let customerStatus = this.$store.state.customerStatus[1].status;
			this.customerStatus = customerStatus;
			// #endif
		},
		methods: {
			// 点击选择车型
			selectCar(id) {
				this.carId = id;
				// this.carShow = true;
			},
			submit() {
				if (!validate(this.phone_no, 'require')) {
					this.$message.info('请输入手机号');
					return false;
				}
				if (!validate(this.phone_no, 'phone')) {
					this.$message.info('请输入正确的手机号');
					return false;
				}
				this.$api.post(global.apiUrls.postCarLease, {
					phone_no: this.phone_no,
					car: this.carId
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.info('提交成功');
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			customerClose() {
				this.customerStatus = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.top_img {
			width: 100%;
			height: 516rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.car_content {
			background: #FFF9E8;
			position: relative;
			z-index: 2;
			padding: 0 32rpx;
		}

		.car_content::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 60rpx;
			top: 0;
			/* 从顶部20px开始 */
			left: 0;
			right: 0;
			bottom: 0;
			/* 到底部 */
			background: linear-gradient(to bottom, #FFE498, #FFF9E8);
			/* 渐变从顶部颜色到较浅颜色 */
			z-index: 1;
			/* 确保伪元素在内容之下 */
		}
		.car_content_bg {
			position: relative;
			z-index: 3;
			padding-bottom: 1rpx;
		}

		.tips {
			margin: 0 0 46rpx;
			border: 8rpx solid #FCAA4C;
			border-radius: 24rpx;
			padding: 50rpx 32rpx 32rpx;
			position: relative;

			.tips_text {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
			}

			.tips_img {
				width: 344rpx;
				height: 58rpx;
				position: absolute;
				top: -20rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 10;
			}
		}

		.field {
			transform: translateY(-16rpx);
			margin: 0 0 46rpx;
			border: 8rpx solid #FCAA4C;
			border-radius: 24rpx;
			padding: 0 25rpx 48rpx;

			.field_phone {
				border-bottom: 1px solid #E5E5E5;
				height: 92rpx;

				.field_phone_label {
					font-weight: 400;
					font-size: 32rpx;
					color: #000000;
				}

				.field_phone_input {
					height: 92rpx;
					flex: 1;
					text-align: right;
					font-size: 32rpx;
					background: transparent;
				}

				.field_phone_icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
				.selct_info {
					.select_item {
						margin-left: 24rpx;
						.select_item_img {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							transform: translateY(4rpx);
						}
						.select_item_text {
							font-weight: 400;
							font-size: 32rpx;
							color: #000000;
						}
					}
				}
			}

			.button {
				width: 100%;
				margin: 48rpx 0 0;
				height: 100rpx;
				background: #FC5B03;
				border-radius: 20rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.customer_view {
			width: 100%;
			padding: 20rpx 48rpx;
			background: #F4FFF3;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
		
			.customer_le {
				width: 60rpx;
				height: 48rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			.customer_ce {
				flex: 1;
				padding: 0 28rpx;
		
				.customer_ce_1 {
					font-size: 30rpx;
		
					.customer_ce_1_1 {
						display: inline-block;
						font-weight: 600;
						position: relative;
					}
		
					.customer_ce_1_1::after {
						content: "";
						background: #01D662;
						width: 52rpx;
						height: 6rpx;
						border-radius: 10rpx;
						position: absolute;
						bottom: 6rpx;
						left: 50%;
						transform: translateX(-50%);
						z-index: -1;
					}
				}
		
				.customer_ce_2 {
					font-size: 24rpx;
					color: #999;
				}
		
				.customer_ce_img {
					width: 30rpx;
					height: 30rpx;
				}
			}
		
			.customer_ri {}
		}

		.myInfo_picker4_0_c2 {
			color: #FC5B03;
			line-height: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
		}

		.myInfo_picker4_0_c1 {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.myInfo_picker4_0_c0 {
			line-height: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #BFBFBF;
		}

		.myInfo_picker4_0 {
			border-bottom: 1px solid #eee;
			background: #fff;
			background-size: 100% !important;
			padding: 0rpx 32rpx 0rpx 32rpx;
			line-height: 88rpx;
			border-radius: 25rpx 25rpx 0rpx 0rpx;
			background-size: 100% auto !important;
		}
	}
</style>